<template>
  <view class="my-container">
    <!-- 用户信息 -->
    <view class="user-info" @tap="login">
      <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
      <view class="user-detail">
        <text class="nickname">{{ userInfo.nickname || '立即登录' }}</text>
        <text class="phone" v-if="userInfo.phone">{{ userInfo.phone }}</text>
      </view>
      <uni-icons type="right" size="16" color="#999"></uni-icons>
    </view>
    
    <!-- 我的服务 -->
    <view class="my-service">
      <view class="service-title">我的服务</view>
      <view class="service-grid">
        <view 
          class="service-item" 
          v-for="(item, index) in services" 
          :key="index"
          @tap="navigateToService(item)"
        >
          <image :src="item.icon" mode="aspectFit"></image>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 设置列表 -->
    <view class="settings-list">
      <view 
        class="settings-item"
        v-for="(item, index) in settings"
        :key="index"
        @tap="navigateToSetting(item)"
      >
        <text>{{ item.name }}</text>
        <uni-icons type="right" size="16" color="#999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const userInfo = ref({
  avatar: 'https://pic1.58cdn.com.cn/nowater/fangfe/n_v2d0440d85683b45b5b7e11a5b6ea768c5.jpg',
  nickname: '',
  phone: ''
})

const services = ref([
  { 
    name: '我的发布', 
    icon: 'https://img.58cdn.com.cn/weixin/r/mine/publish.png',
    url: '/pages/my/publish'
  },
  { 
    name: '我的收藏', 
    icon: 'https://img.58cdn.com.cn/weixin/r/mine/favorite.png',
    url: '/pages/my/favorite'
  },
  { 
    name: '浏览记录', 
    icon: 'https://img.58cdn.com.cn/weixin/r/mine/history.png',
    url: '/pages/my/history'
  },
  { 
    name: '我的订单', 
    icon: 'https://img.58cdn.com.cn/weixin/r/mine/order.png',
    url: '/pages/my/order'
  }
])

const settings = ref([
  { name: '实名认证', url: '/pages/my/verify' },
  { name: '地址管理', url: '/pages/my/address' },
  { name: '意见反馈', url: '/pages/my/feedback' },
  { name: '关于我们', url: '/pages/my/about' }
])

const login = () => {
  if (!userInfo.value.nickname) {
    uni.navigateTo({
      url: '/pages/login/login'
    })
  }
}

const navigateToService = (item) => {
  uni.navigateTo({
    url: item.url
  })
}

const navigateToSetting = (item) => {
  uni.navigateTo({
    url: item.url
  })
}
</script>

<style scoped>
.my-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-info {
  background-color: #fff;
  padding: 60rpx 30rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.user-info::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200rpx;
  background: linear-gradient(180deg, #ff552e 0%, rgba(255,85,46,0) 100%);
  opacity: 0.1;
  z-index: 0;
}

.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  border: 6rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.user-detail {
  flex: 1;
  z-index: 1;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #333;
}

.phone {
  font-size: 28rpx;
  color: #999;
}

.my-service {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx;
}

.service-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.service-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 30rpx;
  background: #ff552e;
  border-radius: 3rpx;
}

.service-grid {
  display: flex;
  flex-wrap: wrap;
}

.service-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.service-item image {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.service-item text {
  font-size: 24rpx;
  color: #333;
}

.settings-list {
  margin-top: 20rpx;
  background-color: #fff;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.settings-item text {
  font-size: 30rpx;
  color: #333;
}

.settings-item:active {
  background-color: #f8f8f8;
}
</style> 